<template>
	<view class="app">
		<!-- 轮播图容器 -->
		<swiper class="carousel" indicator-dots autoplay="true" circular="true" indicator-active-color="#fff"
			indicator-color="#000">
			<!-- 第一项轮播图 -->
			<swiper-item class="swipers">
				<image src="https://image01.dujiabieshu.com/uploads/poster/20210317184326_9286.jpg"></image>
				<view class="swipers-text01">甘南诺尔丹营地</view>
				<view class="swipers-text02">藏地绝美的孤独浪漫</view>
			</swiper-item>
			<!-- 第二项轮播图 -->
			<swiper-item class="swipers">
				<image src="https://image02.dujiabieshu.com/uploads/poster/20220808181220_2992.jpg"></image>
				<view class="swipers-text01">野在山川 · 安吉</view>
				<view class="swipers-text02">谢柯新作，安吉最新开业奢华酒店</view>
			</swiper-item>
			<!-- 第三项轮播图 -->
			<swiper-item class="swipers">
				<image src="https://image01.dujiabieshu.com/uploads/poster/20220804144125_6221.jpg"></image>
				<view class="swipers-text01">阳朔糖舍</view>
				<view class="swipers-text02">感受60年代的老糖厂，一步一幅山水图</view>
			</swiper-item>
			<!-- 第四项轮播图 -->
			<swiper-item class="swipers">
				<image src="https://image02.dujiabieshu.com/uploads/poster/20220816181341_4918.jpg"></image>
				<view class="swipers-text01">中卫沙漠星星酒店</view>
				<view class="swipers-text02">徜徉大漠与星空 感受最孤独的浪漫</view>
			</swiper-item>
			<!-- 第五项轮播图 -->
			<swiper-item class="swipers">
				<image src="https://image04.dujiabieshu.com/uploads/poster/20220817114335_1719.jpg"></image>
				<view class="swipers-text01">腾冲玛御谷悦榕庄</view>
				<view class="swipers-text02">旅在云南，居于悦榕</view>
			</swiper-item>
		</swiper>
		<!-- 选择酒店 -->
		<view class="main_search">
			<!-- 头部 -->
			<view class="main_search_title">
				<view class="main_search_tab_warp">
					<text class="menu_bar_m"
						style="width: 300rpx;background: url(https://s1.328888.xyz/2022/09/03/ki91i.png);">别墅</text>
					<text>酒店</text>
					<text>度假</text>
				</view>
			</view>
			<!-- 身体 -->
			<view class="searchBox">
				<input class="searchDestination" v-model="name" placeholder="搜索目的地 / 别墅名称 "/> 
				<!-- 时间 -->
				<view class="main_search-date">
					<picker mode="date" @change="bindDateChange" class="picker-date1">
						<view class="pd-text">{{anyDate}}</view>
					</picker>
					<view class="msd"> -- </view>
					<picker mode="date" @change="bindDateChange2" class="picker-date1"
						style="width: 42%; position: absolute;right: 0;">
						<view class="pd-text">{{anyDate2}}</view>
					</picker>
				</view>
				<!-- 选择品牌 -->
				<view class="choseBrand">
					<view class="choseBrandTitle">选择品牌</view>
					<view style="margin-top: 8rpx;">
						<img src="../../static/image/my/Right_arrow.png" alt="" style="width: 25px;height: 25px;">
					</view>
				</view>
				<!-- 搜索酒店按钮 -->
				<view class="searchBtn" @click="search">搜别墅</view>
			</view>
		</view>
		<!-- 热门目的地 -->
		<view class="title_box_index">
			<!-- 头部 -->
			<view class="title_index">热门目的地</view>
			<view class="more_index">更多<img src="../../static/image/my/Right_arrow.png" alt="" style="width: 20px;height: 20px;float: right;"></view>
			<!-- 身体 -->
			<scroll-view class="hot_dest" scroll-x>
				<view class="swiper-slide" v-for="hot in hot" :style="{backgroundImage:`url(${hot.ImgUrl})`}">
					<view class="swiper-text"> {{ hot.name }} </view>
				</view>
			</scroll-view>
		</view>
		<!-- 最受欢迎的别墅 -->
		<view class="title_box_index">
			<!-- 头部 -->
			<view class="title_index">最受欢迎的别墅</view>
			<view class="more_index">更多 <img src="../../static/image/my/Right_arrow.png" alt="" style="width: 20px;height: 20px;float: right;"></view>
			<!-- 滚动条 -->
			<scroll-view scroll-x="true" class="hot_dest" style="font-size: 40rpx;height: 80rpx;">
				<view style="width: 20%;display: inline-block;">
					<view style="color: #ff8800;text-align: center;">苏梅岛</view>
					<view style="width: 60rpx;border: 2px solid #ff8800;margin: auto;margin-top: 5rpx;"></view>
				</view>
				<view style="width: 25%;display: inline-block;">
					<view style="text-align: center;">普吉岛</view>
				</view>
				<view style="width: 25%;display: inline-block;">
					<view style="text-align: center;">巴厘岛</view>
				</view>
				<view style="width: 25%;display: inline-block;">
					<view style="text-align: center;">京都府</view>
				</view>
				<view style="width: 25%;display: inline-block;">
					<view style="text-align: center;">北海道</view>
				</view>
				<view style="width: 25%;display: inline-block;">
					<view style="text-align: center;">海南</view>
				</view>
			</scroll-view>
			<!-- 身体 -->
			<scroll-view class="hot_dest" style="height: 580rpx;margin-top: -30rpx;" scroll-x>
				<view class="cell_index" v-for="w in welcome" @tap="goDetail">
					<!-- 图片 -->
					<view class="cell-image" :style="{backgroundImage:`url(${w.ImgUrl})`}">
						<view class="cell-image-text">{{w.place}}</view>
					</view>
					<view class="cell_index-text">
						<view class="citile">{{w.name}}</view>
						<view class="citile-price">{{w.price}} <text style="color: #777;">/ 晚起</text> </view>
						<!-- 分割线 -->
						<view class="halving-line"></view>
						<view class="cellinfo">
							<!-- 床数 -->
							<image style="margin-left: 10rpx;" src="../../static/image/index/icon/ico_6.svg" mode=""></image>
							<text> {{w.bed}} </text>
							<!-- 浴缸 -->
							<image src="../../static/image/index/icon/ico_7.svg" mode=""></image>
							<text> {{w.bathtub}} </text>
							<!-- 游泳池 -->
							<image src="../../static/image/index/icon/ico_8.svg" mode=""></image>
							<text> {{w.pool}} </text>

							<!-- 右边 -->
							<view style="position: absolute;right: 10rpx;">
								住过 <text style="margin-right: 10rpx;">{{w.stayed}} </text> | 评论 <text
									style="margin-right: 10rpx;">{{w.comment}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

		</view>
		<!-- 最受欢迎的酒店 -->
		<view class="title_box_index">
			<!-- 头部 -->
			<view class="title_index">最受欢迎的酒店</view>
			<view class="more_index">更多 <img src="../../static/image/my/Right_arrow.png" alt="" style="width: 20px;height: 20px;float: right;"></view>
			<!-- 滚动条 -->
			<scroll-view scroll-x="true" class="hot_dest" style="font-size: 40rpx;height: 80rpx;">
				<view style="width: 20%;display: inline-block;">
					<view style="color: #ff8800;text-align: center;">上海</view>
					<view style="width: 40rpx;border: 2px solid #ff8800;margin: auto;margin-top: 5rpx;"></view>
				</view>
				<view style="width: 25%;display: inline-block;">
					<view style="text-align: center;">北京</view>
				</view>
				<view style="width: 25%;display: inline-block;">
					<view style="text-align: center;">广州</view>
				</view>
				<view style="width: 25%;display: inline-block;">
					<view style="text-align: center;">深圳</view>
				</view>
				<view style="width: 25%;display: inline-block;">
					<view style="text-align: center;">成都</view>
				</view>
				<view style="width: 25%;display: inline-block;">
					<view style="text-align: center;">杭州</view>
				</view>
			</scroll-view>
			<!-- 身体 -->
			<scroll-view class="hot_dest" style="height: 500rpx;margin-top: -30rpx;" scroll-x>
				<view class="cell_index" v-for="wa in welcome_apartment">
					<!-- 图片 -->
					<view class="cell-image" :style="{backgroundImage:`url(${wa.ImgUrl})`}">
						<view class="cell-image-text" style="margin-top: 230rpx;">{{wa.place}}</view>
					</view>
					<view class="cell_index-text">
						<view style="display: flex; position: relative;line-height: 130rpx;">
							<view class="citile"
								style="font-size: 44rpx;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
								{{wa.name}}
							</view>
							<view class="citile-price"
								style="position: absolute;right: 30rpx;font-weight: bold;line-height: 110rpx;font-size: 36rpx;">
								{{wa.price}}
								<text style="color: #777;"> 起</text>
							</view>
						</view>
						<view style="display: flex;position: relative">
							<view style="line-height: 10rpx;margin-left: 20rpx;font-size: 32rpx">{{wa.EnglishName}}
							</view>
							<view
								style="position: absolute;right: 30rpx;display: flex;margin-top: -30rpx;font-size:32rpx;">
								<view style="background-color: #f7d7d5;color: #d9345e;padding: 10rpx">{{wa.info1}}
								</view>
								<view
									style="background-color: #dde9f9;color: #66aeec;padding: 10rpx;margin-left: 20rpx">
									{{wa.info2}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 私享小团 -->
		<view class="title_box_index">
			<!-- 头部 -->
			<view class="title_index">私享小团</view>
			<view class="more_index">更多 <img src="../../static/image/my/Right_arrow.png" alt="" style="width: 20px;height: 20px;float: right;"> </view>
			<!-- 身体 -->
			<scroll-view class="hot_dest" style="height: 500rpx;margin-bottom: 200rpx;" scroll-x>
				<view class="cell_index" v-for="en in enjoy">
					<!-- 图片 -->
					<view class="cell-image" :style="{backgroundImage:`url(${en.ImgUrl})`}">
						<view class="cell-image-text" style="margin-top: 230rpx;">{{en.place}}</view>
					</view>
					<view class="cell_index-text">
						<view class="citile"
							style="width: 95%; line-height: 90rpx;font-size: 40rpx;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
							<text style="color: #ff5a5f">{{en.type}}</text> {{en.name}}
						</view>
						<view class="citile-price" style="font-size: 37rpx;">{{en.price}}<text style="color: #777;">
								/人起</text></view>
					</view>
				</view>
			</scroll-view>
					
		</view>

	</view>

</template>


<script>
	export default {
		data() {
			return {
				name:"",
				hotelImgUrl: "../../static/image/index/icon/ico_1.png",
				timeIndex: 0,
				timeIndex2: 0,
				anyDate: "2022-10-21",
				anyDate2: "请选择结束时间",
				// 热门目的地图片
				hot: [{
						ImgUrl: "https://image03.dujiabieshu.com/uploads/destination/cover/maldives.jpg",
						name: "马来西亚"
					},
					{
						ImgUrl: "https://image04.dujiabieshu.com/uploads/destination/cover/sanya.jpg",
						name: "三亚"

					},
					{
						ImgUrl: "https://image01.dujiabieshu.com/uploads/destination/cover/zhejiang.png",
						name: "浙江"
					},
					{
						ImgUrl: "https://image02.dujiabieshu.com/uploads/destination/cover/shanghai.jpg",
						name: "上海"
					},
					{
						ImgUrl: "https://image03.dujiabieshu.com/uploads/destination/cover/20200701104243_4466.jpg",
						name: "江苏"
					},
					{
						ImgUrl: "https://image04.dujiabieshu.com/uploads/destination/cover/20200707181757_3450.png",
						name: "云南"
					},
					{
						ImgUrl: "https://image01.dujiabieshu.com/uploads/destination/cover/phuket.jpg",
						name: "普吉岛"
					},
					{
						ImgUrl: "https://image02.dujiabieshu.com/uploads/destination/cover/kohsamui.jpg",
						name: "苏梅岛"
					},
					{
						ImgUrl: "https://image03.dujiabieshu.com/uploads/destination/cover/beijing.jpg",
						name: "北京"
					},
					{
						ImgUrl: "https://image04.dujiabieshu.com/uploads/destination/cover/sichuan.jpg",
						name: "四川"
					},
					{
						ImgUrl: "https://image01.dujiabieshu.com/uploads/destination/cover/bali.jpg",
						name: "巴厘岛"
					},
				],
				// 最受欢迎的别墅图片
				welcome: [{
						ImgUrl: "https://image02.dujiabieshu.com/uploads/destination/article/3/3049/mobile.20220512125003_4364.jpg",
						name: "库恩庄园别墅",
						place: "苏梅岛 | 查汶海滩", // 地点
						price: "￥8497 ",
						bed: "5-7", // 床数
						bathtub: 9, // 浴缸
						pool: 1, // 游泳池
						stayed: 142, // 住过
						comment: 5 // 评论
					},
					{
						ImgUrl: "https://image03.dujiabieshu.com/uploads/destination/article/5/5010/mobile.20220515115947_7550.jpg",
						name: "萨穆嘉纳21号别墅",
						place: "苏梅岛 | 曾蒙海滩", // 地点
						price: "￥16065 ",
						bed: "6", // 床数
						bathtub: 6, // 浴缸
						pool: 1, // 游泳池
						stayed: 12, // 住过
						comment: 0 // 评论
					},
					{
						ImgUrl: "	https://image03.dujiabieshu.com/uploads/destination/article/1/1562/mobile.21.jpg",
						name: "青瓷别墅",
						place: "泰国，苏梅岛", // 地点
						price: "￥16596 ",
						bed: "7-9", // 床数
						bathtub: 6, // 浴缸
						pool: 1, // 游泳池
						stayed: 1233, // 住过
						comment: 12 // 评论
					},
					{
						ImgUrl: "https://image01.dujiabieshu.com/uploads/destination/article/7/7304/mobile.20220319151728_1221.jpg",
						name: "八号元素别墅",
						place: "苏梅岛莱姆瑟海滩", // 地点
						price: "￥8497 ",
						bed: "3-7", // 床数
						bathtub: 2, // 浴缸
						pool: 1, // 游泳池
						stayed: 21, // 住过
						comment: 0 // 评论
					},
					{
						ImgUrl: "https://image03.dujiabieshu.com/uploads/destination/article/1/1498/mobile.23.jpg",
						name: "月影别墅",
						place: "泰国，苏梅岛", // 地点
						price: "￥8033 ",
						bed: "4-7", // 床数
						bathtub: 5, // 浴缸
						pool: 1, // 游泳池
						stayed: 956, // 住过
						comment: 2 // 评论
					},
					{
						ImgUrl: "https://image01.dujiabieshu.com/uploads/destination/article/1/1292/mobile.20220515203554_4937.jpg",
						name: "密斯卡湾吾玉别墅",
						place: "泰国，苏梅岛", // 地点
						price: "￥6639 ",
						bed: "2", // 床数
						bathtub: 0, // 浴缸
						pool: 1, // 游泳池
						stayed: 0, // 住过
						comment: 0 // 评论
					}
				],
				// 最受欢迎的酒店图片
				welcome_apartment: [{
						ImgUrl: "https://statics.dujiabieshu.com/uploads/hotel_gds_img/2019/04/12/8483d89ecc1e9ae36622be8f4d683a82.jpg",
						name: "上海宝格丽酒店",
						place: "中国 | 上海 | 上海", // 地点
						price: "￥1,800 ",
						EnglishName: "FAIRMONT PEACE HOTE",
						info1: "家庭",
						info2: "商务"
					},
					{
						ImgUrl: "https://statics.dujiabieshu.com/uploads/hotel_gds_img/2019/04/10/963429b5254d6ea0c4c7362b201c555f.jpg",
						name: "上海外滩华尔道夫酒店",
						place: "中国 | 上海 | 上海", // 地点
						price: "￥1,371起 ",
						EnglishName: "JING AN SHANGRILA",
						info1: "家庭",
						info2: "城市景观"
					},
					{
						ImgUrl: "https://statics.dujiabieshu.com/uploads/hotel_gds_img/2019/04/09/4e461731a8e8ce5943537be45715835a.jpg",
						name: "上海半岛酒店",
						place: "中国 | 上海 | 上海", // 地点
						price: "￥1,950 ",
						EnglishName: "FAIRMONT PEACE HOTE",
						info1: "家庭",
						info2: "商务"
					},
					{
						ImgUrl: "https://image03.dujiabieshu.com/uploads/hotel_img/1926/20200309122248_5161.jpg",
						name: "上海镛舍酒店",
						place: "中国 | 上海 | 上海", // 地点
						price: "￥1,391",
						EnglishName: "The Boaidi Apartment",
						info1: "家庭",
						info2: "商务"
					}
				],
				// 私享小团
				enjoy: [{
						ImgUrl: "https://image03.dujiabieshu.com/uploads/small_group/170/mobile.2002181117495e4b575d9acc2.jpg",
						name: "加勒比海假期-多米尼加8天6晚公务舱尽享宁静时光",
						type: "私家团 | ", // 地点
						price: "￥98,500 "
					},
					{
						ImgUrl: "https://image01.dujiabieshu.com/uploads/small_group/168/mobile.2002110312065e4253c6b5655.jpg",
						name: "安缦普瑞7天6晚隐世之旅",
						type: "私家团 | ", // 地点
						price: "￥37,800 "
					},
					{
						ImgUrl: "https://image04.dujiabieshu.com/uploads/small_group/159/mobile.1908140457135d53cce9f2f0a.jpg",
						name: "巴西&阿根廷12天11晚，探索世界奇景",
						type: "私家团 | ", // 地点
						price: "￥59,900 "
					},
					{
						ImgUrl: "https://image02.dujiabieshu.com/uploads/small_group/165/mobile.1908080937515d4b7cef33c8b.jpg",
						name: "非洲之傲~南非8天7晚复古珍贵回忆之旅",
						type: "私家团 | ", // 地点
						price: "￥41,900 "
					},
					{
						ImgUrl: "https://image02.dujiabieshu.com/uploads/small_group/185/mobile.2002150329085e479dc46e5f9.jpg",
						name: "秘鲁&玻利维亚探秘天空之境",
						type: "私家团 | ", // 地点
						price: "￥46,500 "
					},
					{
						ImgUrl: "https://image04.dujiabieshu.com/uploads/small_group/79/mobile.1902281148015c7759f1ec02d.jpg",
						name: "自由行|普吉岛奇玛拉5天4晚自由行在奇玛拉雨林开启一场奇幻之旅",
						type: "自由行 | ", // 地点
						price: "￥99,90 "
					},
					{
						ImgUrl: "https://image03.dujiabieshu.com/uploads/small_group/54/mobile.1902010118115c53d69306605.jpg",
						name: "自由行|苏梅w酒店5天四晚自由行打卡周董同款的网红酒店",
						type: "自由行 | ", // 地点
						price: "￥5,500 "
					}
				]
			}
		},
		onLoad() { //页面启动时执行的事件，相当于Vue中的created：function()
		},
		methods: { //事件方法
			bindDateChange(e) {
				console.log(e)
				this.anyDate = e.detail.value
				this.timeIndex = 4
			},
			changeTime(index) {
				this.timeIndex = index
			},
			bindDateChange2(e) {
				console.log(e)
				this.anyDate2 = e.detail.value
				this.timeIndex2 = 4
			},
			// 跳转页面
			goDetail() {
				uni.navigateTo({
					url: '/commodity/pages/commodity_details/commodity_details'
				});
			},
			search(){
				wx.reLaunch({
					url: "../../commodity/pages/results/results?name="+this.name
				})
			}
		}
	}
</script>

<style>
	@import url(../../static/css/public.css);
</style>
